<template>
  <div id="center-bottom">
     
    <div id="main1" v-for="user in article" :key="user.article_id">
      <div id="main1-img">
        <img :src=" user.article_img" />
      </div>
      <div id="main1-username">
        <h4>{{user.article_username}}</h4>
        <span>{{user.article_job1}}</span>
      </div>
      <div id="main1-btn">
        <button class="guanzhu" @click="aims(user.article_id)" ref="aim">关注</button>
      </div>
      <div id="main1-txt">
        <p>{{user.article_text}}</p>
        <br />
      </div>
      <hr />
      <div id="main1-pic">
        <img src="../../assets/images/喜欢.png" class="point" />
        <span
          class="main1-ziti"
          @click="love(user.article_id)"
          ref="loves"
        >{{user.article_favorite}}</span>
        <img src="../../assets/images/评论.png" class="point" />
        <span class="main1-ziti">{{user.article_topic}}</span>
        <img src="../../assets/images/分享.png" class="point" />
        <span class="main1-ziti">{{user.article_share}}</span>
      </div>
      <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
    </div>
  </div>
</template>
<script scoped>
export default {
  data() {
    return {
      article: [],
      zan: [],
      num: 0,
    };
  },
  computed: {
    addlist() {
      return this.$store.state.addarticle;
    }
  },
  created() {
    this.$axios
      .get("http://localhost:3000/talk/articletalk")
      .then(res => {
        console.log("article:", res.data.data);
        this.article = res.data.data;
        this.$store.state.list = this.article;
      })
      .catch(err => {
        console.log("err:", err);
      });
    // this.article.push(this.$store.state.addarticle)
    // console.log('555',this.article)
  },
  methods: {
    aims(user) {
      if (this.$refs.aim[user - 1].innerHTML == "关注") {
        this.$refs.aim[user - 1].style.backgroundColor = "#fff";
        this.$refs.aim[user - 1].style.border = "1px solid rgb(67,184,252)";
        this.$refs.aim[user - 1].style.color = "rgb(67,184,252)";
        this.$refs.aim[user - 1].innerHTML = "取消关注";
      } else if (this.$refs.aim[user - 1].innerHTML == "取消关注") {
        this.$refs.aim[user - 1].style.backgroundColor = "#fff";
        this.$refs.aim[user - 1].style.border = "1px solid rgb(148, 233, 127)";
        this.$refs.aim[user - 1].style.color = "rgb(148, 233, 127)";
        this.$refs.aim[user - 1].innerHTML = "关注";
      }
    },
    love(user) {
      this.num = parseInt(this.$refs.loves[user - 1].innerHTML);
      this.$refs.loves[user - 1].innerHTML = this.num + 1;
      this.$refs.loves[user - 1].style.color = "#ff3300"
      this.$refs.loves[user - 1].style.fontSize = "18px"
      this.$axios
        .get("http://localhost:3000/talk/zan", {
          params: { user: user }
        })
        .then(res => {
          console.log("article:", res.data.data);
          this.zan = res.data.data;
          console.log("zan", res.data.data);
        })
        .catch(err => {
          console.log("err:", err);
        });
    }
  }
};
</script>
<style>
#main4,
#main3,
#main2,
#main1,
#main5,
#main6,
#main7,
#main8 {
  width: 690px;
  margin-top: 8px;
  background-color: #fff;
  padding: 25px 50px;
  opacity: 0.8;
}
#main8-img img,
#main7-img img,
#main6-img img,
#main5-img img,
#main4-img img,
#main3-img img,
#main2-img img,
#main1-img img {
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: relative;
  margin-top: 10px;
  margin-left: 10px;
}
#main5-username h4,
#main6-username h4,
#main7-username h4,
#main8-username h4,
#main4-username h4,
#main3-username h4,
#main2-username h4,
#main1-username h4 {
  cursor: pointer;
  position: relative;
  margin-top: -50px;
  margin-left: 80px;
}
#main8-username span,
#main7-username span,
#main6-username span,
#main5-username span,
#main4-username span,
#main3-username span,
#main2-username span,
#main1-username span {
  color: #666;
  font-size: 13px;
  position: relative;
  margin-left: 80px;
}
#main8-btn .guanzhu,
#main7-btn .guanzhu,
#main6-btn .guanzhu,
#main5-btn .guanzhu,
#main4-btn .guanzhu,
#main3-btn .guanzhu,
#main2-btn .guanzhu,
#main1-btn .guanzhu {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid rgb(148, 233, 127);
  border-radius: 10%;
  color: aqua;
  width: 100px;
  height: 40px;
  font-size: 15px;
  position: absolute;
  margin-top: -50px;
  margin-left: 600px;
}
#main8-txt,
#main7-txt,
#main6-txt,
#main5-txt,
#main4-txt,
#main3-txt,
#main2-txt,
#main1-txt {
  position: relative;
  margin-top: 10px;
  margin-left: 75px;
}

/* #main1-pic ul{
        width:700px;
        list-style: none;
        }  */
#main8-pic .point,
#main7-pic .point,
#main6-pic .point,
#main5-pic .point,
#main4-pic .point,
#main3-pic .point,
#main2-pic .point,
#main1-pic .point {
  cursor: pointer;
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px;
  margin-top: -3px;
  margin-left: 70px;
}
.main8-ziti,
.main7-ziti,
.main6-ziti,
.main5-ziti,
.main4-ziti,
.main3-ziti,
.main2-ziti,
.main1-ziti {
  cursor: pointer;
  color: #666;
  position: relative;
  margin-left: 40px;
}
</style>